<template>
  <div class="container">
    <h3 class="title">
      <svg-icon icon-class="nested" class="title-icon" />统计预览
    </h3>
    <panel-group :rank="ranks"></panel-group>
    <el-card>
      <div slot="header" class="clearfix" style="border:0 none;">
        <el-button
          v-for="(item,index) in arrs"
          :key="index"
          :type="cur==index?'primary':'default'"
          @click="goData(index)"
        >{{item}}月</el-button>
        <el-select v-model="years" placeholder="请选择" style="float:right;width:100px;">
          <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </div>
      <div class="clearfix" style="border-top:1px solid #e6ebf5;margin-bottom:10px;">
        <h3 class="title-small">销售记录</h3>
        <el-table
          :data="tableData"
          height="300"
          border
          stripe
          style="width: 100%;margin-bottom:10px;"
        >
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column label="日期">
            <template slot-scope="scope">{{scope.row.time|getTime}}</template>
          </el-table-column>
          <el-table-column prop="amountReceived" label="应收款总额"></el-table-column>
          <el-table-column prop="actualAmountReceived" label="实收款总额"></el-table-column>
          <el-table-column prop="saleProject" label="在售项目"></el-table-column>
        </el-table>
        <div style="margin-bottom:10px;">
          {{arrs[cur]}}月总计 应收总金额：
          <span class="money">{{amuntReceived2.toFixed(2)}}</span> 实收总金额：
          <span class="money">{{actualAmountReceived2.toFixed(2)}}</span>
        </div>
        <el-pagination
          @size-change="handletSizeChange"
          @current-change="handleCChange"
          :current-page="paget"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagetSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageT"
          style="float: right;"
        ></el-pagination>
      </div>
      <div class="clearfix" style="border-top:1px solid #e6ebf5;">
        <h3 class="title-small">项目销售排行</h3>
        <el-table :data="list" height="300" border stripe style="width: 100%;margin-bottom:10px;">
          <el-table-column prop="no" label="序号"></el-table-column>
          <el-table-column prop="name" label="项目"></el-table-column>
          <el-table-column prop="amountReceived" label="应收款总额"></el-table-column>
          <el-table-column prop="actualAmountReceived" label="实收款总额"></el-table-column>
          <el-table-column prop="nowReceived" label="今日收款总额"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPages"
          style="float: right;"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import PanelGroup from "./components/PanelGroup";
import { getRank, getT, getRecord, getAllYear, getMonth } from "@/api/tj";
export default {
  name: "DashboardAdmin",
  components: {
    PanelGroup
  },
  filters: {
    getTime(timestamp) {
      var time = new Date(timestamp);
      var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
      var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
      M = m < 10 ? "0" + M : M;
      var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
      d = d < 10 ? "0" + d : d;
      var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
      h = h < 10 ? "0" + h : h;
      var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
      m = m < 10 ? "0" + m : m;
      var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
      s = s < 10 ? "0" + s : s;
      return y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
    }
  },
  watch: {
    years() {
      getMonth(this.years).then(res => {
        this.arrs = res.data;
      });
    }
  },
  data() {
    return {
      list: [],
      ranks: {
        actualAmountReceived: 0,
        amuntReceived: 0,
        num: 0,
        amuntReceived2: 0,
        amuntReceivedByNow: 0
      },

      actualAmountReceived2: 0,
      amuntReceived2: 0,
      arrs: [],
      cur: 0,
      options: [],
      years: "2019",
      page: 1,
      pageSize: 10,
      paget: 1,
      pagetSize: 10,
      pageT: 0,
      totalPages: 0,
      tableData: []
    };
  },
  mounted() {
    if (localStorage.l != undefined) {
      localStorage.removeItem("l");
      window.location.reload();
    }
    //获取年
    this.getData();
    setTimeout(() => {
      //获取统计接口
      this.getT();
      //获取记录
      this.getRecords();
      //获取排名
      this.getRank();
    }, 1500);
  },
  methods: {
    // 获取年
    getData() {
      getAllYear().then(res => {
        this.options = res.data;
        this.years = this.options[0];
        getMonth(this.years).then(res => {
          this.arrs = res.data;
        });
      });
      this.years = this.options[0];
    },
    // 项目销售排行条数变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRank();
    },
    // 销售记录分页条数接口
    handletSizeChange(val) {
      this.pagetSize = val;
      this.getRecords();
    },
    //项目销售排行页数接口
    handleCurrentChange(val) {
      this.page = val;
      this.getRank();
    },
    // 销售记录分页页数接口
    handleCChange(val) {
      this.paget = val;
      this.getRecords();
    },
    // 项目销售排行获取
    getT() {
      getT(this.years + "-" + this.arrs[this.cur]).then(res => {
        this.ranks.actualAmountReceived = res.data.actualAmountReceived;
        this.ranks.amuntReceived = res.data.amuntReceived;
        this.ranks.num = res.data.num;
        this.ranks.amuntReceivedByNow = res.data.amuntReceivedByNow;
      });
    },
    // 销售记录数据
    getRecords() {
      getRecord(
        this.years + "-" + this.arrs[this.cur],
        this.paget,
        this.pagetSize
      ).then(res => {
        this.tableData = res.data.list;
        this.pageT = res.data.allNum;
        this.actualAmountReceived2 = res.data.actualAmountReceived;
        this.amuntReceived2 = res.data.amuntReceived;
      });
    },
    // 销售排名
    getRank() {
      getRank(this.page, this.pageSize).then(res => {
        this.list = res.data.list;
        this.totalPages = res.data.allNum;
      });
    },
    //修改月的获取接口
    goData(index) {
      this.cur = index;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title {
    font-size: 14px;
    font-weight: 400;
    .title-icon {
      font-size: 14px;
      display: inline-block;
      margin-right: 5px;
    }
  }
  /deep/ .el-card__header {
    border: 0 none;
  }
}
.title-small {
  font-size: 14px;
}

.money {
  color: #409eff;
}
</style>
